import {
  DrawerForm,
  ModalForm,
  ProForm,
  ProFormDatePicker,
  ProFormInstance,
  ProFormSegmented,

  ProFormSelect,

  ProFormText,

  ProFormTextArea,
  ProFormUploadDragger,
} from '@ant-design/pro-components';
import React, { useRef, useState } from 'react';
import './index.less'
import { Button, Col, message, Row } from 'antd';
import { fetchChannelUser } from '@/pages/DyCps/service';
import { request } from 'umi';
import moment from 'moment';

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.RuleListItem>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: any) => void;
  onSubmit: (values: any) => Promise<void>;
  onUpdate: (values: any) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<any>;
};

const FollowOrderForm: React.FC<UpdateFormProps> = (props) => {
  const formRef = useRef<ProFormInstance>();
  const [updateType, setUpdateType] = useState<any>('excel');
   const [date,setDate] = useState<any>('');
  return (
    <DrawerForm
      title="跟单"
      width="720px"
      formRef={formRef}
      visible={props.updateModalVisible}
      onVisibleChange={(val) => {
        if (!val) {
          props.onCancel();
        }
        formRef?.current?.setFieldsValue({
          name: props?.values.name,
          shopName: props?.values.shopName,
        });
      }}
      onFinish={async (val) => {
        let orders = val.orders;
        if('\n'.indexOf(orders)) {
          orders = orders.split('\n')
        } else {
          return message.error("订单格式有误~")
        }
        props.onSubmit({ ...val, orders, dccId: props?.values.id,date });
      }}
    >
       <ProForm.Group>
        <ProFormText
          name="name"
          width='md'
          label="项目名称"
          disabled
        >
        </ProFormText>
        <ProFormText
          name="shopName"
          width='sm'
          label="直播间名称"
          disabled
        ></ProFormText>
      </ProForm.Group>
      <ProForm.Group>
        <ProFormSegmented
          name="upType"
          label="选择跟单方式"
          onChange={(val)=>{
            setUpdateType(val);
          }}
          valueEnum={{
            excel: '上传excel',
            order: '批量订单号',
          }}
        />
        <ProFormDatePicker
          label="跟单的开始时间"
          width='sm'
          name='date'
          tooltip="不选,默认从前3天开始跟单"
          onChange={(val)=>{
            const date = moment(new Date(val)).format('YYYY-MM-DD HH:mm:ss');
            setDate(date);
          }}
        >
        </ProFormDatePicker>
      </ProForm.Group>
      {updateType === "excel" ? 
      
      <ProForm.Group>
      <ProFormUploadDragger
          max={1}
          fieldProps={{
            name: 'file',
            data: {
              token:localStorage.getItem('token'),
              dccId: props?.values.id,
              date: date
            },
          
          }}
          action="/api/uploadDyFileDiff"
          label="选择跟单文件格式【.xls/.xlsx】"
        />  
        <ModalForm
          title="订单导入数据"
          trigger={<Button>示例</Button>}
          submitter={false}
        >
          <table className="com_table">
            <tr>
                <th>订单号</th>
                <th>付款金额</th>
                <th>图片地址</th>
            </tr>
            <tr>
                <td>1111</td>
                <td>2222</td>
                <td>图片地址（可选填）</td>
            </tr>
            <tr>
                <td>1111</td>
                <td>2222</td>
                <td>数据2-3</td>
            </tr>
           
        </table>
        </ModalForm>
      </ProForm.Group>: 
      <ProFormTextArea
        width="md"
        name="orders"
        label="订单号"
        placeholder="请输入多个订单号,用逗号或回车分割"
        rules={[{ required: true, message: '订单称不能为空!' }]}
      />
    }
   
    </DrawerForm>
  );
};

export default FollowOrderForm;
